<template>
    <div class="detail_module_panel loan_history">
        <div class="panel_info_content">
            <el-table class="loan_history_table" :data="tableData" style="width: 100%">
                <el-table-column align="left" prop="collectionUserName" :label="$t('common.operator')" width="120"></el-table-column><!--操作人-->
                <el-table-column align="left" prop="createTime" :label="$t('common.operatingTime')" width="150"></el-table-column><!--操作时间-->
                <el-table-column align="left" :label="$t('collection.colObject')" prop="touchObj" width="150"></el-table-column><!--催收对象-->
                <el-table-column align="left" :label="$t('collection.colModus')" prop="collectMethod" width="100"></el-table-column><!--催收形式-->
                <el-table-column align="left" :label="$t('common.telephoneNumber')" prop="collectPhone" width="150"></el-table-column><!--电话号码-->
                <el-table-column align="left" label="查看呼叫详情" width="120" prop="callRecordId">
                    <template slot-scope="scope">
                        <el-button @click="checkCallDetail(scope.row)" size="small" type="primary" v-if="scope.row.callRecordId > 0">查看</el-button>
                    </template>
                </el-table-column>
                <el-table-column align="left" :label="$t('collection.colResult')" prop="telFeedBack" width="130"></el-table-column><!--催收结果-->
                <el-table-column align="left" :label="$t('collection.promiseRepayDay')" prop="commitmentRepayDate" min-width="120"></el-table-column><!--承诺还款日-->
                <el-table-column align="left" :label="$t('common.remark')" prop="remark" :show-overflow-tooltip="true" min-width="100"></el-table-column><!--备注-->
            </el-table><!--end table-->
            <!-- <pagination @pageChange="pageChange" :page="page">分页组件</pagination> -->
            <!--呼叫详情弹框-->
            <el-dialog title="电呼详情" :visible.sync="callShow" width="800px" class="callDetail">
                <el-row>
                    <el-col :span="12">主叫号码： {{ callInfo.caller }}</el-col>
                    <el-col :span="12">被叫号码： {{ callInfo.called }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">呼叫类型： {{ callInfo.callType | switchCallType}}</el-col>
                    <el-col :span="12">呼叫状态： {{ callInfo.state === '0' ? '呼叫失败' : '呼叫成功' }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">振铃时长：{{ callInfo.ringDuration + 's' }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">通话开始时间： {{ callInfo.startTime }}</el-col>
                    <el-col :span="12">通话结束时间： {{ callInfo.stopTime }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="12">通话时长： {{ callInfo.duration + 's' }}</el-col>
                    <el-col :span="12">通话结束原因： {{ callInfo.reason }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">通话转接次数：{{ callInfo.xferTimes }}</el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">通话录音下载地址：
                        <el-button @click="download()">下载</el-button>
                        <span style="margin-left: 10px;display: inline-block;">({{ callInfo.generateTime }}前有效)</span>
                    </el-col>
                </el-row>
            </el-dialog>
        </div>
    </div>
</template>

<script>
    import mixin from '@/service/mixin';
    import Pagination from '@/components/pagination';
    import EventBus from '@/libs/event-bus';
    import {eventConf} from '@/config/';

    export default {
        name: 'urgingRecordsM5',
        components: {
            Pagination,
        },
        props: {
            userId: {
                default: ''
            }
        },
        mixins: [mixin],
        data() {
            return {
                orderId: '',
                overdueInfoId: '',
                tableData: [],
                callInfo: {},
                callShow: false,
                url: '',
            };
        },
        methods: {
            getTableData(page) {
                const params = {
                    overdueInfoId: this.overdueInfoId,
                    //   teamId: 'M3+',
                    //   page: {
                    //     pageNo: page.currentPage,
                    //     pageSize: this.page.pageSize
                    //   },
                };
                this.$api.collection.getNotesPre(params).then((res) => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000') {
                        this.tableData = data || [];
                        // this.setPage(data.page, this.page);
                    }
                });
            },
            download() {
                window.open(this.url, '_blank');
            },
            checkCallDetail(row) {
                this.callShow = true;
                const params = {
                    id: row.callRecordId,
                };
                this.$api.callCenter.getRecordPre(params).then((res) => {
                    const {status, data, error} = res;
                    if (status === '1' && error === '00000000') {
                        this.callInfo = data || [];
                        this.url = data.url;
                    }
                });
            },
            listenEvent() {
                EventBus.$on(eventConf.PREURGINGNOPAY, () => {
                    this.getTableData({currentPage: 1});
                });
            }
        },
        filters: {
            // 订单状态
            switchCallType(type) {
                switch (+type) {
                    case 0:
                        return '双向回拨';
                    case 1:
                        return '电话直拨';
                    case 2:
                        return '语音验证码';
                    case 3:
                        return '双向回拨';
                    case 4:
                        return '电话直拨';
                    case 5:
                        return '语音验证码';
                    case 7:
                        return '批量外呼';
                    default:
                        return '';
                }
            },
        },
        created() {
            const params = this.$route.params;
            this.overdueInfoId = params.id;
            this.orderId = params.orderId;
            //   this.page.pageSize = 3;
            if (this.overdueInfoId) {
                this.getTableData({currentPage: 1});
                this.listenEvent();
            }
        }
    };
</script>

<style lang="scss" scoped>
    .panel_info_content, .loan_history {
        padding: 0;
    }
</style>
